<script setup lang="ts">
import TreeTransfer from "@/components/TreeTransfer.vue";
import {ref, onMounted} from 'vue';

let treeTransferRef = ref(); // 树形穿梭框
let fromData = ref<any>([]); // 树形数据
let toData = ref([9,10]); // 选中的ids数据
const transferProps = ref({
  label: 'label',
  children: 'children',
  disabled: 'disabled',
});

const getChildList:any = ref([])
// 子组件树形穿梭框返回
const checkVal = (val: any) => {
  console.log('父组件返回的数据 ： ',val);
  getChildList.value = val
};

const handleClick = () => {
  console.log(getChildList.value);
}

// 获取左侧用户列表
const getUserList = () => {
  fromData.value = [
    {
      id: 1,
      label: '1Level one 1',
      children: [
        {
          id: 4,
          label: '1-1',
          children: [
            {
              id: 9,
              label: '1-1-1',
            },
            {
              id: 10,
              label: '1-1-2',
            },
          ],

        },
      ],
    },
    {
      id: 2,
      label: '2Level one 2',
      children: [
        {
          id: 5,
          label: '2-1',
        },
        {
          id: 6,
          label: '2-2',
        },
      ],
    },
    {
      id: 3,
      label: '3Level one 31111111',
      children: [
        {
          id: 7,
          label: '3-111111111111111111',
          disabled:true
        },
        {
          id: 8,
          label: 'Level two 3-21111111',
          disabled:true,
          children: [
            {
              id: 11,
              label: '4-111111111111111111111',
            },
            {
              id: 12,
              label: '4-211111111111111111111',
            },
          ],
        },
      ],
    },
  ]
}

onMounted(() => {
  getUserList()
})
</script>

<template>
<!--  <TreeTransferAAA />-->
  <div>
    <p class="select_meb">选择固定成员:</p>
    <div class="shuttle_frame">
      <tree-transfer
          ref="treeTransferRef"
          node-key="id"
          :leftData="fromData"
          :defaultSelectionKeys="toData"
          :defaultProps="transferProps"
          isSort
          defaultExpandAll
          isSelectAllNodes
          @checkVal="checkVal"
      >
<!--        <template #right-item="{item,index}">-->
<!--         {{index}}：{{item}}-->
<!--        </template>-->
      </tree-transfer>
    </div>
    <!-- 底部按钮 -->
    <div class="modfiy_but">
      <el-button @click="handleClick">确认</el-button>
    </div>
  </div>
</template>

<style scoped>

</style>
